<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生报名</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="jquery-3.6.0.js"></script>
    <!--三级联动-->
    <script src="js/area.js" type="text/javascript"></script>
    <script src="js/selectMore.js" type="text/javascript"></script>
</head>
<body>

<form class="layui-form" action="" lay-filter="example" style="margin-right: 100px;margin-left: 100px;margin-top: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入姓名"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号码</label>
        <div class="layui-input-block">
            <input id="idCard" type="text" name="idCard" lay-verify="idCard" placeholder="请输入身份证号码"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" id="sex1" name="gender" value="男" title="男" checked="">
            <input type="radio" id="sex2" name="gender" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">民族</label>
        <div class="layui-input-block">
            <input id="nation" type="text" name="nation" lay-verify="nation" placeholder="请输入民族"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--手机-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <!--邮箱-->
    <div class="layui-form-item">
        <label class="layui-form-label">请输入邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" lay-verify="email" placeholder="" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <!--学习类型-->
    <div class="layui-form-item">
        <label class="layui-form-label">学习类型</label>
        <div class="layui-input-block">
            <select name="businessId" lay-filter="学习类型">
                <option value=""></option>
                <option value="0" selected="">成人教育</option>
                <option value="1">自学考试</option>
                <option value="2">网络教育</option>
                <option value="3">国家开放大学</option>
            </select>
        </div>
    </div>
    <!--三级联动省市县-->
    <div class="layui-form-item">
        <label class="layui-form-label">贯籍</label>
        <div class="layui-inline">
            <select name="province" class="province" id="province" lay-verify="required" lay-search
                    lay-filter="province">
                <option value="">省份</option>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city" class="city" id="city" lay-verify="required" lay-search lay-filter="city">
                <option value="">地级市</option>
            </select>
        </div>
        <div class="layui-inline">
            <select onchange="getSelectInfo()" name="xian" class="district" id="xian" lay-verify="required"
                    lay-search>
                <option value="">县/区</option>
            </select>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">具体地址</label>
            <div class="layui-input-block">
                <textarea id="life" name="life" lay-verify="life" placeholder="请输入具体地址" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div style="display: none">
        <input disabled="disabled" name="nationPlace" id="nationPlace">
    </div>
    <div style="display: none">
        <input disabled="disabled" name="area" id="area">
    </div>

    <!--三级联动省市县-->
    <div class="layui-form-item">
        <label class="layui-form-label">现居住地</label>
        <div class="layui-inline">
            <select name="province1" class="province" id="province1" lay-verify="required" lay-search
                    lay-filter="province">
                <option value="">省份</option>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city1" class="city" id="city1" lay-verify="required" lay-search lay-filter="city">
                <option value="">地级市</option>
            </select>
        </div>
        <div class="layui-inline">
            <select onchange="getSelectInfo()" name="xian1" class="district" id="xian1" lay-verify="required"
                    lay-search>
                <option value="">县/区</option>
            </select>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">具体地址</label>
            <div class="layui-input-block">
                <textarea id="life1" name="life1" lay-verify="life" placeholder="请输入具体地址" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div style="display: none">
        <input disabled="disabled" name="address" id="address">
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="remark" name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
        <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="addFilter" type="submit" class="layui-btn" lay-submit="" lay-filter="addFilter">立即提交</button>
            <button type="button" class="layui-btn layui-btn-normal" id="getAll">取值</button>
            <button type="button" class="layui-btn layui-btn-normal" id="setAll">赋值</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '姓名至少得2个字符';
                }
            },
            life:function (value){
                if (value.length<=1) {
                    return '请输入具体地址';
                }
            }
            // ,pass: [
            //     /^[\S]{6,12}$/
            //     ,'密码必须6到12位，且不能出现空格'
            // ]
        });
        //监听提交
        form.on('submit(addFilter)', function (data) {
            $.ajax({
                url: "/student/insert",
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(data.field),
                dataType: "json",
                type: "post",
                success: function (result) {
                    if (result.code == '0') {
                        layer.msg(result.msg, {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            })
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            //return false;
        });

        layui.$('#setAll').on('click', function () {
            form.val('example', {
                "name": "贤心" // "name": "value"
                , "idCard": "41092319981006725X"
                , "sex": "男"
                , "nation" : "汉族"
                , "phone": "18625637463" //开关状态
                , "email": "1862563746@qq.com"
            })
        });

        //由身份证获得性别
        layui.$('#idCard').on('input', function () {
            var sfz = $("#idCard").val();
            var pdsex = sfz.substring(16, 17);
            if ((pdsex % 2) == 0) {
                document.getElementById("sex2").checked = true;
                document.getElementById("sex1").checked = false;
            } else {
                document.getElementById("sex1").checked = true;
                document.getElementById("sex2").checked = false;
            }
            layui.form.render();

        });
        //获得地址
        layui.$('#life').on('input', function () {
            $("#nationPlace").val($("#province").val()+$("#city").val()+$("#xian").val());
            $("#area").val($("#province").val()+$("#city").val()+$("#xian").val()+$("#life").val());
            layui.form.render();
        });
        //获得地址
        layui.$('#life1').on('input', function () {
            $("#address").val($("#province1").val()+$("#city1").val()+$("#xian1").val()+$("#life1").val());
            layui.form.render();
        });
        //表单取值
        layui.$('#getAll').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });

</script>
</html>